<template>
    <div>
        <div class='container'>
            <div class='handle-box'>
                <!--搜索框-->
                订单号：
                <el-input v-model='query.orderNum' placeholder='请输入订单号' class='handle-input mr10' style='width: 150px'
                          prefix-icon='el-icon-search'></el-input>

                <el-button type='primary' icon='el-icon-search' @click='handleSearch'>搜索</el-button>
                <el-button type='primary' icon='el-icon-refresh-left' @click='resetSearch'>重置</el-button>
            </div>

            <!--工具栏-->
            <div style='margin-bottom: 20px'>
                <el-button type='primary' class='el-icon-message' @click='payBatchOrder()'>支付多个订单</el-button>
                <el-button type='danger' class='el-icon-delete' @click='deleteBatchOrder()'>批量取消订单</el-button>
                <!--                <el-button type='primary' @click='handleDetail()'>详情</el-button>-->
            </div>

            <!--tab页-->
            <el-tabs v-model='query.status' type='card' @tab-click='handleTabClick'>
                <el-tab-pane label='待支付' name='0'></el-tab-pane>
                <el-tab-pane label='待发货' name='1'></el-tab-pane>
                <el-tab-pane label='待收货' name='2'></el-tab-pane>
                <el-tab-pane label='已完成' name='3'></el-tab-pane>
            </el-tabs>

            <!--数据表格体-->
            <el-table
                :data='tableData'
                border
                class='table'
                ref='multipleTable'
                header-cell-class-name='table-header'
                @selection-change='handleSelectionChange'
            >
                <el-table-column type='selection' width='55' align='center'></el-table-column>
                <el-table-column type='index' width='55' label='序号' align='center'></el-table-column>
                <el-table-column prop='orderId' label='订单ID' align='center' v-if=false></el-table-column>
                <el-table-column prop='orderNum' width='366' label='订单号' align='center'></el-table-column>
                <el-table-column prop='orderAmount' label='订单金额(元)' align='center'>
                    <template slot-scope='scope' >
                        <span style='color: sandybrown;font-size: large'>
                        {{ scope.row.orderAmount | priceFilter }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop='createTime' label='订单时间' align='center'></el-table-column>


                <!--工具栏-->
                <el-table-column label='操作' width='180' align='center' >
                    <template slot-scope='scope'>
                        <el-button type='text'
                                   @click='handleDetail(scope.$index, scope.row)'
                        >查看订单详情
                        </el-button>
                        <el-button type='text'
                                   v-if='scope.row.status==0'
                                   @click='payOrder(scope.$index, scope.row)'
                        >支付
                        </el-button>
                        <el-button
                            type='text'
                            class='red'
                            v-if='scope.row.status==0'
                            @click='cancelOrder(scope.$index, scope.row)'
                        >取消
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class='pagination'>
                <el-pagination
                    background
                    layout='total, prev, pager, next'
                    :current-page='query.pageIndex'
                    :page-size='query.pageSize'
                    :total='pageTotal'
                    @current-change='handlePageChange'
                ></el-pagination>
            </div>
        </div>

        <detail-order ref='detailOrderDialog'></detail-order>
    </div>
</template>

<script>
import detailOrder from '../order/DetailOrder'
export default {
    name: 'orderTable',
    components: {
        detailOrder
    },
    data() {
        return {
            query: {
                orderNum: '',//订单号
                status: '0',//订单状态
                pageIndex: 0,
                pageSize: 10
            },
            tableData: [],//数据表格数据
            pageTotal: 0,//分页总数
            multipleSelection: []//多选值
        };
    },
    //初始化函数
    mounted() {
        this.getData();
    },
    //过滤器
    filters: {
        priceFilter(d) {
            return '￥' + d.toFixed(2);
        },
        stockFilter(d) {
            if (d == undefined || d == null) {
                return 0;
            }
            return d;
        }
    },
    methods: {
        // 给数据表格赋值
        getData: function() {
            this.$http.post(this.global.BASIC_SERVER + '/orderController/showMyOrder.json', this.query).then(res => {
                if (res.data.status) {
                    this.tableData = res.data.data.records;//数据
                    this.pageTotal = res.data.data.total;//总数
                }
            });
        },
        //订单详情
        handleDetail(index,row){
            //调用子组件方法
            this.$nextTick(() => {
                this.$refs.detailOrderDialog.init(row.orderId);
            });
        },
        //支付多个订单
        payBatchOrder() {
            const data = this.multipleSelection;
            if (data.length < 1) {
                this.$message.error('至少选择一个订单');
            } else {
                const orderIds = new Array();
                for (const d of data) {
                    orderIds.push(d['orderId']);
                }
                this.$http.post(this.global.BASIC_SERVER + '/orderController/payOrder.json',orderIds).then(res => {
                    if (res.data.status) {
                        this.$message.success(res.data.msg);
                        this.getData();
                    }
                });
            }
        },
        //支付单个订单
        payOrder(scope,row){
            const orderIds = new Array();
            orderIds.push(row.orderId);
            this.$http.post(this.global.BASIC_SERVER + '/orderController/payOrder.json', orderIds).then(res => {
                if (res.data.status) {
                    this.$message.success("支付成功!");
                    this.getData();
                }
            });
        },
        //批量取消订单
        deleteBatchOrder() {
            const data = this.multipleSelection;
            if (data.length < 1) {
                this.$message.error('至少选择一个订单');
            } else {
                const orderIds = new Array();
                for (const d of data) {
                    orderIds.push(d['orderId']);
                }
                this.$http.post(this.global.BASIC_SERVER + '/orderController/cancelOrder.json', orderIds).then(res => {
                    if (res.data.status) {
                        this.getData();
                    }
                });
            }
        },
        //取消订单
        cancelOrder(scope,row){
            const orderIds = new Array();
            orderIds.push(row.orderId);
            this.$http.post(this.global.BASIC_SERVER + '/orderController/cancelOrder.json',orderIds).then(res => {
                if (res.data.status) {
                    this.getData();
                }
            });
        },
        //tab切换
        handleTabClick(tab, event) {
            this.query.status = tab.name;
            this.getData();
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 0);//重置为首页
            this.getData();//重新请求赋值
        },

        // 触发重置按钮
        resetSearch() {
            this.query.orderNum = '';
            this.$set(this.query, 'pageIndex', 0);//重置为首页
            this.getData();//重新请求赋值
        },
        // 分页导航
        handlePageChange(val) {
            console.log(val);
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        // 多选操作
        handleSelectionChange(val) {
            console.log(val);
            this.multipleSelection = val;
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.yellow {
    color: #E6A23C;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
